<template>
<base-page class="base-form history-task" title="历史任务" @back="goBack">
	<view class="filter-box" style="padding: 10px 12px; background: white">
		<u-search class="search" shape="square" bg-color="#F7F8FA" :show-action="false"
			placeholder="请输入流程名称" v-model="searchString" @search="onRefresh" />
	</view>
	<view class="main-box" style="padding: 16px">
		<custom-list 
			ref="cardList"
			height="100%"
			:isLoading="tableWidget.loading"
			:finished="tableWidget.finished"
			:dataList="tableWidget.dataList"
			@load="tableWidget.loadDataList"
		>
			<view class="task-item" v-for="(data ,index) in tableWidget.dataList" :key="index">
				<TaskCard class="task-item" :flowStatus="data.flowStatus" :cardData="getCardData(data)"
					@click.native="goTaskDetails(data)">
					<template #menu>
						<view class="card-menu-box" type="flex" justify="space-between" align="center">
							<view class="user-box">
								<u-avatar :size="48" mode="circle" style="margin-right: 10rpx;"
									:src="data.headImageUrl"
									:text="(data.headImageUrl == null || data.headImageUrl === '') ? data.showName : undefined" />
								<text class="userName">{{ data.showName }}</text>
							</view>
						</view>
					</template>
				</TaskCard>
			</view>
		</custom-list>
	</view>
</base-page>
</template>

<script>
	import { DropdownWidget, TableWidget } from '@/utils/widget.js';
	import TaskCard from '../components/taskCard.vue';
	import {
		FlowOperationController
	} from '@/api/flowController.js';
	import {
		getHeadImageUrl
	} from '@/utils';

	export default {
		name: 'formMyApprovedTask',
		components: {
			TaskCard
		},
		data() {
			return {
				tableWidget: new TableWidget(this.loadTableData, this.loadTableDataVerify, true),
				searchString: ''
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '历史任务'
			});

		},
		onShow() {
			this.$nextTick(() => {
				if (this.$refs.cardList) {
					this.$refs.cardList.reset();
				}
			})
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			goTaskDetails(row) {
				FlowOperationController.viewInitialHistoricTaskInfo(this, {
						processInstanceId: row.processInstanceId
					})
					.then(res => {
						const data = {
							processDefinitionKey: row.processDefinitionKey,
							taskId: null,
							processInstanceId: row.processInstanceId,
							processDefinitionId: row.processDefinitionId,
							formId: res.formId,
							headImageUrl: row.headImageUrl,
							routerName: res.mobileRouterName || res.routerName,
							flowStatus: row.flowStatus,
							readOnly: true,
							flowEntryName: row.processDefinitionName,
							processInstanceInitiator: row.showName,
						}

						uni.navigateTo({
							url: '/views/workflow/handleFlowTask/index?passData=' + encodeURIComponent(JSON
								.stringify(data))
						});
					});
			},
			onRefresh() {
				this.pageNum = 1;
				if (this.$refs.cardList) this.$refs.cardList.reset();
			},
			getCardData(cardData) {
				return {
					title: cardData.processDefinitionName,
					subTitle: [
						'工单编号：' + (cardData.workOrderCode || ''),
						'发起时间：' + (cardData.startTime || ''),
						'结束时间：' + (cardData.endTime || '无')
					]
				}
			},
			getListParent(sender) {
				return sender.$parent.$parent;
			},
			loadTableDataVerify() {
				return true;
			},
			loadTableData(params) {
				if (params == null) params = {};
				params = {
					...params,
					processDefinitionName: this.searchString
				}
				return new Promise((resolve, reject) => {
					FlowOperationController.listHistoricProcessInstance(this, params).then(res => {
						resolve({
							dataList: res.dataList.map(item => {
								return {
									...item,
									headImageUrl: getHeadImageUrl(item)
								}
							}),
							totalCount: res.totalCount
						});
					}).catch(e => {
						reject(e);
					});
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.search {
		flex: 1;
	}

	.list {
		flex-grow: 1;
		flex-shrink: 1;
		padding: 32rpx;
		position: relative;
	}

	.task-item+.task-item {
		margin-top: 15px;
	}

	.card-menu-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #f0efef;
		padding-top: 8px;
		margin-top: 10px;
	}

	.card-menu-box .user-box {
		height: 24px;
		display: flex;
		align-items: center;
	}

	.card-menu-box .user-box .text {
		color: #666666;
		font-size: 12px;
	}

	.userName {
		font-size: 12px;
		color: #666666;
		font-weight: 400;
	}
</style>